<template>
  <Dialog title="处理工单" :visible="visible" class="single-column" :loading="loading" :reveal="true" button-text="保存" @close="handleClose" @confirm="balanceSubmit">
    <!-- 回访记录 -->
    <div>
      <el-form ref="ruleForm" :model="currentRow" status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="顾客：">{{ currentRow.customerName }}</el-form-item>
        <el-form-item label="投诉类型：">{{ currentRow.complaintType }}</el-form-item>
        <el-form-item label="关联项目：">{{ currentRow.projectName }}</el-form-item>
        <el-form-item label="投诉方式：">{{ currentRow.complaintMode }}</el-form-item>
        <el-form-item label="联系电话：">{{ currentRow.customerPhone }}</el-form-item>
        <el-form-item label="投诉内容：">{{ currentRow.complaintContent }}</el-form-item>
        <el-form-item label="接待客服：">{{ currentRow.receptionCustomerServiceName }}</el-form-item>
        <el-form-item label="接待时间：">{{ currentRow.receptionTime }}</el-form-item>
        <el-form-item label="工单截止日期：">{{ currentRow.closingDate }}</el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="complaintStatus" placeholder="请选择状态" class="el-select-y">
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            />
          </el-select></el-form-item>
        <el-form-item label="处理方案：">
          <el-input v-model="currentRow.handlerProgramme" type="textarea" placeholder="请输入处理方案" :rows="2" class="textarea-border" />
        </el-form-item>
      </el-form>
    </div>
  </Dialog>
</template>
<script>
import Dialog from "@/components/Dialog";
export default {
  components: {
    Dialog,
  },
  filters: {
    phoneHandle(val) {
      if (!val) return '';
      let phone = "";
      phone = val.substring(0, 3) + "****" + val.substring(val.length - 4, val.length);
      return phone;
    },
  },
  props: {
    currentRow: {
      type: Object,
      default: () => ({}),
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      statusList: [{ id: 0, value: "处理中" }, { id: 1, value: "已处理" }],
      complaintStatus: "处理中",
      loading: false,
    };
  },
  watch: {
    currentRow: {
      handler(val) {
        if (val.complaintStatus === "已处理" || val.complaintStatus === "处理中") this.complaintStatus = val.complaintStatus;
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
  },
  methods: {
    handleClose() {
      this.$emit("handleClose");
    },
    async balanceSubmit() {
      this.loading = true;
      this.currentRow.complaintStatus = this.complaintStatus;
      const res = await this.$api['data/complaint/updateComplaint']({ ...this.currentRow });
      this.loading = false;
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success("回访记录保存成功");
      this.$emit("handleSuccess");
    },
  },
};
</script>
<style lang="scss" scoped>
.pull-right{
  float: right;
}
.font-color{
  color:#FF6600;
}
.button-color{
  color:#0099FF;
  border-color:#0099FF;
}
.clear{
  clear: both;
}
.el-col,.el-col-12{
  line-height: 40px;
}
.dialog-magin-y{
  // margin: 0 auto;
  margin: 0 150px;
}
</style>
